<!--
 * @Description:
 * @Author: william
 * @Date: 2024-03-20 15:01:00
 * @LastEditors: william
 * @LastEditTime: 2025-04-22 15:06:28
-->
<template>
  <el-table-column
    v-if="hasDefaultSlot"
    align="center"
    :prop="prop"
    :data-prop="dataProp"
    :min-width="getMinWidth()"
    :formatter="formatEmptyValue"
    :="$attrs"
  >
    <template #header>
      <slot name="header" />
    </template>
    <template #default="scope">
      <slot v-bind="scope" />
    </template>
  </el-table-column>
  <el-table-column
    v-else
    align="center"
    :prop="prop"
    :data-prop="dataProp"
    :min-width="getMinWidth()"
    :formatter="formatEmptyValue"
    :="$attrs"
  />
</template>

<script setup>
const props = defineProps({
  prop: {
    type: String,
    default: ''
  },
  maxWidth: {
    type: Number,
    default: 180
  }
})

const $attrs = useAttrs()
const slots = useSlots()
const dataProp = computed(() => ('column-width' in $attrs ? props.prop : ''))
const hasDefaultSlot = computed(() => !!slots.default || !!slots.header)

const getMinWidth = () => {
  const labelWidth = g_utils.calcTextWidth($attrs.label)
  // 表头宽度与展示内容宽度对比出最大值
  let actualWidth = Math.max(labelWidth, $attrs['column-width'] || 0)
  // 保留在一行中显示
  if ($attrs['show-overflow-tooltip'] !== undefined) {
    actualWidth += 2
  }
  // 对表格进行排序
  if ($attrs.sortable !== undefined) actualWidth += 24
  return Math.min(props.maxWidth, actualWidth)
}

const formatEmptyValue = (row, column, cellValue) => {
  return g_utils.formatValue(cellValue)
}
</script>
